<template>
  <div class="goods">
    <ul>
      <!-- 使用编程式路由 和声明式路由的差别
        1、原来把li改为<router-link to='路径' tag='li'> 
        2、现在给li加一个点击事件，事件里定义 this.$router.push('path路径') 
      3、均需在router.js中定义routes-->
      <li v-for="item in goodsList" :key="item.id" @click="toGoodsInfo(item.id)">
        <img :src="item.img_url" alt>
        <h4>{{item.title}}</h4>
        <div class="price">
          <span class="new">￥{{item.sell_price}}</span>
          <span class="old">￥{{item.market_price}}</span>
        </div>
        <p>
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </li>
    </ul>
    <mt-button type="primary" size="large" @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageindex: 1,
      goodsList: []
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      this.$http.get("api/getgoods?pageindex=" + this.pageindex).then(res => {
        // console.log(res.body.message);
        this.goodsList = this.goodsList.concat(res.body.message);
      });
    },
    getmore() {
      this.pageindex += 1;
      this.getGoods();
    },
    toGoodsInfo(id) {
      //  this.$router.go(-1)后退功能，参数为1前进功能
      // 方法一：直接path路径
      this.$router.push("/goodsinfo/" + id);
      // 方法二：对象path
      // this.$router.push({path:'/goodsinfo/'+id});
      // 方法三：命名路由:注意要在router.js中routes对象中加一个name属性
      // this.$router.push({name:'路由名字',params:{id:id}});
    }
  }
};
</script>
<style lang="less" scoped>
.goods {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    padding: 5px;
    li {
      width: 49%;
      border: 1px solid #ccc;
      list-style: none;
      margin-bottom: 5px;
      padding: 5px;
      img {
        width: 100%;
      }
      h4 {
        font-size: 14px;
        height: 47px;
      }
      .new {
        color: red;
        font-size: 18px;
        font-weight: 700;
        margin-right: 10px;
      }
      .old {
        text-decoration: line-through;
        color: #aaa;
        font-size: 12px;
      }
      p {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
      }
    }
  }
}
</style>